
<template>
	<el-main>
		<div id="3dcanvs"></div>
	</el-main>
</template>

<script setup>
  import {  nextTick,onMounted } from 'vue'
  import * as THREE from 'three';
  // 引入轨道控制器扩展库OrbitControls.js
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  let roorms = [
      {
        key: 'tv',
        value: '电视',
        cover: "img/bg.png",
        position: new THREE.Vector3(-8, 2, -15),
      },
      {
        key: 'art',
        value: '艺术品',
        cover: "img/bg2.png",
        position: new THREE.Vector3(10.5, 0, -15),
      },
    ]
  const width = window.innerWidth; //宽度
  const height = window.innerHeight; //高度
  // 创建3D场景对象Scene
  const scene = new THREE.Scene();
  const axesHelper = new THREE.AxesHelper(1000);
  scene.add(axesHelper);

  // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
  const camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);
  scene.add(camera)

  //相机观察目标指向Threejs 3D空间中某个位置
  camera.lookAt(0, 0, 0);
  camera.position.set(0, 0, 50);

  //创建球体
  const sphereGeometry = new THREE.SphereGeometry(50,50, 100);
  const textureLoader = new THREE.TextureLoader();
  const sphereMaterial = new THREE.MeshBasicMaterial({
      map: textureLoader.load('img/bg.png'),        
      side: THREE.FrontSide,
  });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.set(0, 0,0);
  sphere.geometry.scale(1, 1, -1);

  scene.add(sphere);
  let planearr = []
  //创建平面
  roorms.forEach(($t) => {
    const plane = new THREE.Mesh(
      new THREE.PlaneGeometry(10, 10), 
      new THREE.MeshBasicMaterial({
      side: THREE.DoubleSide,
      map: textureLoader.load($t.cover),
      }
    ));
    plane.position.set($t.position.x, $t.position.y, $t.position.z);
    plane.rotation.x = -Math.PI ;
    scene.add(plane);
    planearr.push(plane)
  });
  

  //创建射线
  // const raycaster = new THREE.Raycaster();

  // window.addEventListener('click', (event)=>{
  //   //非全屏下的射线拾取映射公式
  //   let dom = document.getElementById('3dcanvs');
  //   let x = ((event.clientX - dom.getBoundingClientRect().left) / window.innerWidth) * 2 - 1;
  //   let y = -((event.clientY - dom.getBoundingClientRect().top) / window.innerHeight) * 2 + 1;

  //   //使用当前相机和映射点修改当前射线属性
  //   raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
  //   //计算物体和射线的焦点 
  //   console.log(raycaster,'========');
  //   const intersects = raycaster.intersectObject(scene.children); 

  //   if (intersects.length > 0) {
  //       // 选中模型的第一个模型，设置为红色
  //       // intersects[0].object.material.color.set(0xff0000);
  //       // sphere.material.map = new THREE.TextureLoader().load('img/bg2.png');
  //       // sphere.material.needsUpdate = true;
  //   }
  //   console.log("射线器返回的对象", intersects);

  // }, false);

  // ********* 渲染器*********
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
  renderer.render(scene, camera); //执行渲染操作
  renderer.shadowMap.enabled = true;
  new OrbitControls(camera, renderer.domElement);
  // 渲染函数 
  function render() {
    renderer.render(scene, camera); //执行渲染操作
    requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
  }
  render();

  async function increment() {
    await nextTick()
    // DOM 此时已经更新
    document.getElementById("3dcanvs").appendChild(renderer.domElement);
  }
  onMounted(()=>{
	   increment()
  })


</script>
<style scoped>

</style>